import React, { FC, useCallback, useContext } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import '../common.css';
import CardWrap from '@/components/CardWrap/CardWrap';
import { ChagePersonalInfoContext } from '../../ChagePersonalInfoContext';
export interface IProps extends ICompProps {}

Avatar.defaultProps = {} as Partial<IProps>;
function Avatar(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('Avatar', className);
    const { userInfo, setShowComponent } = useContext(ChagePersonalInfoContext);
    const click = useCallback(() => {
        console.log('修改头像');
        setShowComponent('ChangeAvatar');
    },[setShowComponent])
    return (
        <RootView className={localClassName} style={style} onClick={click}>
            <CardWrap className="AVatar_CardWrap">
                <View className="AVatar_wrap">
                    <View className="title">修改头像</View>
                    <View className="avatar">
                        <Image
                            className="avatar"
                            src={userInfo.avatarUrl || require('@/assets/images/noLogin_Avatar.png')}
                            mode="scaleToFill"
                        />
                    </View>
                </View>
            </CardWrap>
        </RootView>
    );
}
export default React.memo(Avatar as FC<IProps>);
const cssBorder = '2px solid #F3F3F3';
const RootView = styled(View)`
    &.Avatar {
        margin-bottom: 50px;
        .AVatar_CardWrap {
            padding-top: 40px;
            border-bottom: ${cssBorder};
        }
        .AVatar_wrap {
            display: flex;
            justify-content: space-between;
            padding-right: 20px;

            align-items: center;
            .avatar {
                width: 92px;
                height: 92px;
            }
        }
    }
`;
